<style lang="scss" scoped>
.home-top {
	margin-left: 26rpx;
	margin-right: 32rpx;
	display: flex;
	align-items: center;

	// justify-content: space-between;
	.home-logoWrap {
		margin-right: 24rpx;

		.home-logo {
			width: 130rpx;
			height: 130rpx;

		}
	}

	.home-name {
		width: 154rpx;
		height: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		// line-height: 64rpx;
		line-height: 36rpx;
		margin-right: 130rpx;
	}

	.home-change {
		width: 256rpx;
		height: 80rpx;
		background: rgba(108, 118, 128, 0);
		border-radius: 40rpx;
		border: 2rpx solid #FFFFFF;
		color: #FFFFFF;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.home-change-text {
			width: 110rpx;
			height: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
		}
	}
}

.home-banner {
	margin: 0rpx 30rpx;
	width: 690rpx;
	height: 300rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.home-notice {
	display: flex;
	align-items: center;
	margin: 0 30rpx;
	width: 690rpx;
	height: 80rpx;
	background: #110F20;
	border-radius: 12rpx;

	.home-notice-Wrap {
		margin-left: 20rpx;

		.home-notice-title {
			width: 48rpx;
			height: 40rpx;
			margin-right: 12rpx;
		}

		.home-notice-content {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 64rpx;
		}
	}

}

.home-main {
	margin: 0 30rpx;


	.home-main-title {
		// width: 106rpx;
		// height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 64rpx;
	}

	.home-main-content {

		.home-main-content-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;

			.home-main-content-nav-item {
				font-family: Source Han Sans CN;
				font-weight: 300;
				font-size: 24rpx;
				color: #999999;
				// line-height: 64rpx;
				line-height: 24rpx;
			}

			.home-main-content-nav-item:nth-child(1) {
				width: 168rpx;
			}

			.home-main-content-nav-item:nth-child(2) {
				text-align: left;
				width: 154rpx;
			}
		}

		.home-main-content-item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.home-content-left {
				display: flex;
				align-items: center;

				.home-content-left-wrap {
					.home-content-left-title {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 30rpx;
					}

					.home-content-left-subTitle {
						margin-top: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 300;
						font-size: 20rpx;
						color: #999999;
						line-height: 30rpx;
					}
				}
			}

			.home-content-middle {
				text-align: left;
				width: 154rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
			}

			.home-content-right {
				image {
					width: 106rpx;
					height: 42rpx;
				}
			}
		}
	}
}
</style>

<template>
	<view class="">
		<z-paging ref="paging" v-model="list" bg-color="#0D081A" @query="getList">
			<view class="" slot="top">
				<NavBarCommon />


				<view class="home-top flex ">
					<view class="home-logoWrap">
						<image class="home-logo" src="/static/image/home/logo.png" mode=""></image>
					</view>
					<view class="home-name" style="">
						Hi~,ONE
					</view>
					<view class="home-change flex  items-center" @click="loginApi">
						<view class="home-change-text text-center" style="margin-left: 20rpx;">
							<!-- {{ truncatedAccount }} -->
							{{ identity }}
						</view>
						<view style="margin-left: 20rpx;margin-right: 20rpx;">|</view>
						<view class="home-change-text">EN</view>
						<view style="margin-right: 20rpx;">
							<image src="/static/image/home/right.png" style="width: 18rpx;height: 10rpx;" mode="scaleToFill" />
						</view>
					</view>
				</view>
				<u-gap height="13"></u-gap>
				<!-- search -->
				<view class="home-search " style="margin-left: 30rpx;margin-right: 30rpx;" @click="recharge">
					<u-search bg-color="#110F20" placeholder="Search" height="80rpx" borderColor="#999999" v-model="keyword"
						@search="search" :showAction="false"></u-search>
				</view>
				<u-gap height="10"></u-gap>
				<!-- banner -->
				<view class="home-banner">
					<!-- <image src="/static/image/home/banner.png" mode=""></image> -->
					<u-swiper :list="bannerList" @change="change" height="165"></u-swiper>
				</view>
				<u-gap height="10"></u-gap>
				<!-- 公告 -->
				<view class="home-notice">
					<view class="flex  items-center home-notice-Wrap">
						<view class="home-notice-title">
							<image src="/static/image/home/bell.png" style="width: 48rpx;height: 40rpx;" />
						</view>
						<view class="home-notice-content">
							<text>系统<text style="color: #264AE9;">公</text>告</text>
							<text style="margin-left: 20rpx;">{{ notice.content }}</text>
						</view>
					</view>
				</view>
				<u-gap height="21"></u-gap>
			</view>
			<view class="">
				<!--  -->




				<!-- 主流币 -->
				<view class="home-main">
					<view class="home-main-title">
						<text>主流币</text>
					</view>
					<view class="home-main-content">
						<view class="home-main-content-nav">
							<view class="home-main-content-nav-item">
								<text>名称</text>
							</view>
							<view class="home-main-content-nav-item">
								<text>最新价</text>
							</view>
							<view class="home-main-content-nav-item">
								<text>今日涨幅</text>
							</view>
						</view>
						<block v-for="(item, index) in list" :key="index">
							<view class="home-main-content-item">
								<view class="home-content-left">
									<view class="flex  items-center  justify-between" style="width: 97px;">
										<!-- margin-right: 40rpx; -->
										<image class="" :src="item.image" style="width: 68rpx;height: 68rpx;" />
										<view class="flex flex-column home-content-left-wrap" style="width: 90rpx;">
											<text class="home-content-left-title">{{ item.name }}</text>
											<text class="home-content-left-subTitle">{{ item.described }}</text>
										</view>
									</view>
								</view>
								<view class="home-content-middle">
									{{ item.newPrice }}
								</view>
								<view class="home-content-right">
									<image :src="Math.random() > 0.5 ? '/static/image/home/rise.png' : '/static/image/home/fall.png'" />
								</view>
							</view>
							<u-line class="" color="#181324" style="margin: 30rpx 0rpx;"></u-line>
						</block>
					</view>
				</view>

			</view>
		</z-paging>


	</view>
</template>

<script>
import { login, recharge, userInfo, getNotice, getBanner } from '@/api/index.js'
import { mapActions } from 'vuex'
import env from '@/utils/env.js'
export default {
	methods: {
		...mapActions('m_userInfo', ['getUserInfo']),
		async recharge() {

			fetch('http://192.168.3.10:8787/v1/notify/recharge', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',  // 注意 Content-Type
				},
				body: JSON.stringify({ key: 'value' }),
			})
				.then(response => response.json())
				.then(data => console.log(data))
				.catch(error => console.error('Error:', error));
		},
		change(index) {
			console.log(index, 'index')
		},
		// 处理后端返回的公告
		handleNotice(notice) {
			return notice.replace(/<[^>]*>?/g, '')
		},

		//公告
		async getNotice() {
			let re = await getNotice()
			let re2 = await getBanner()
			this.notice = re.data
			this.notice.content = this.handleNotice(re.data.content)

			this.bannerList = re2.data.map((i) => env.staticURL + i.image)
			console.log(this.notice.content, '公告')
			console.log(this.bannerList, 'banner')
		},

		// 登录
		async loginApi() {
			let re = await login({
				identity: this.identity,
			})
			if (re.code == 200) {
				uni.setStorageSync('token', re.data.token)
				await this.getUserInfo()
				uni.showToast({
					title: '登录成功',
					icon: 'none'
				})
			}
		},



		search(value) {
			console.log(value)
			this.keyword = ''
			this.getList()
		},
		getList() {
			let re = [
				{
					name: "BTC",
					described: "Bitcion",
					newPrice: "$3.36",
					image: "/static/image/home/btc.png",
					rise: "1.23%",
				},
				{
					name: "ETH",
					described: "Ethereum",
					newPrice: "$52.36",
					image: "/static/image/home/eth.png",
					rise: "1.23%",
				},
				{
					name: "OKB",
					described: "OKB",
					newPrice: "$3.36",
					image: "/static/image/home/okb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				}
			]
			this.$nextTick(() => {
				this.$refs.paging.complete(re)
			})
		},
	},
	onLoad() {
		this.getList()
		// this.getBaseInfo()
	},
	onShow() {
		this.getNotice()
	},
	computed: {
		truncatedAccount() {
			if (this.account) {
				return this.account.slice(0, 6) + "..." + this.account.slice(-4);
			}
			return "";
		},
	},
	data() {
		return {
			userInfo: null,
			identity: 1,
			keyword: "",
			list: [],
			popupVisible: false,
			account: null,
			walletConnected: false,


			// 公告
			notice: {
				id: 0,
				title: "",
				content: "",
				status: 0,
				created_at: "",
				updated_at: ""
			},

			// 轮播
			banner: [
				// {
				// 	"id": 0,
				// 	"title": "",
				// 	"image": "",
				// 	"status": 0,
				// 	"created_at": "",
				// 	"updated_at": ""
				// }
			],
			bannerList: []


		};
	},
};
</script>

<style lang="scss" scoped></style>